<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getStoreSimplePage } from "@/api/basicArchives/storeManagement"; // 门店
import { dealTreeList } from "@/utils/common";
import { Search } from "@element-plus/icons-vue";
import { cloneDeep } from "@pureadmin/utils";

const props = defineProps({
  checkStoreIds: {
    type: Array,
    default: () => []
  },
  showStoreIds: {
    type: Array,
    default: () => []
  }
});

const storeName = ref("");
const loadingStore = ref(false);
const initStoreList = ref([]);
const storeOptions = ref([]);
const oriStoreOptions = ref([]);

// 选择全部
const handleCheckAllChange = (val, item) => {
  item.checked = val ? item.children.map(v => v.id) : [];
  item.isIndeterminate = false;
};

// 选择的值change
const handleCheckedChange = (value, item) => {
  const checkedCount = value.length;
  item.checkAll = checkedCount === item.children.length;
  item.isIndeterminate =
    checkedCount > 0 && checkedCount < item.children.length;
};

// 获取选择的门店
const getChoseStoreList = () => {
  let checkIds = [];
  storeOptions.value.forEach(
    v => (checkIds = checkIds.concat(v.checked || []))
  );

  return initStoreList.value
    .filter(v => checkIds.includes(v.id))
    .map(v => {
      return {
        id: v.id,
        storeName: v.storeName,
        areaId: v.areaId,
        areaName: v.areaName,
        brandId: v.brandId,
        brandName: v.brandName
      };
    });
};

onMounted(async () => {
  loadingStore.value = true;

  // 门店列表获取
  await getStoreSimplePage({ status: 0, pageNum: 1, pageSize: 500 }).then(
    mdData => {
      initStoreList.value = mdData.data?.records || [];
      // 只展示 showStoreIds 有的门店
      if (props.showStoreIds.length > 0) {
        initStoreList.value = initStoreList.value.filter(v =>
          props.showStoreIds.includes(v.id)
        );
      }
      let tempList = dealTreeList(
        initStoreList.value,
        "brandId",
        "brandName",
        "storeName"
      );

      // 回显数据
      if (props.checkStoreIds.length > 0) {
        tempList.forEach(v => {
          v.checkAll = false;

          let checkIds = v.children
            .filter(i => props.checkStoreIds.includes(i.id))
            .map(j => j.id);
          if (checkIds.length > 0) {
            v.isIndeterminate = true;
            v.checked = checkIds;
            if (checkIds.length == v.children.length) {
              v.checkAll = true;
              v.isIndeterminate = false;
            }
          }
        });
      }
      storeOptions.value = tempList;
      oriStoreOptions.value = tempList;
    }
  );

  loadingStore.value = false;
});

const storeBoxRef = ref();
const handleSearch = () => {
  let tempList = cloneDeep(oriStoreOptions.value);
  let firstStoreId = "";
  if (storeName.value) {
    tempList.forEach(v => {
      v.children.forEach(j => {
        if (j.label.includes(storeName.value)) {
          if (!firstStoreId) {
            firstStoreId = j.id;
          }
          j.label = j.label.replace(
            storeName.value,
            "<span style='background-color: #ffff00;'>" +
              storeName.value +
              "</span>"
          );
        }
      });
    });
  }
  storeOptions.value = tempList;

  // 定位
  const element = document.getElementById("storeId_" + firstStoreId);
  if (element) {
    element.scrollIntoView({
      behavior: "smooth",
      block: "center"
    });
  }
};

defineExpose({ getChoseStoreList });
</script>

<template>
  <div class="w-full store-box">
    <el-form ref="ruleFormRef" label-width="100px">
      <el-form-item label="快速定位门店">
        <el-input
          v-model="storeName"
          placeholder="输入门店名称后回车快速定位"
          class="!w-[320px]"
          :suffix-icon="Search"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
    </el-form>
    <div ref="storeBoxRef" v-loading="loadingStore" class="store-lists">
      <div v-for="item in storeOptions" :key="item.id" class="store-list">
        <el-checkbox
          v-model="item.checkAll"
          :indeterminate="item.isIndeterminate"
          @change="value => handleCheckAllChange(value, item)"
        >
          {{ item.label }}
        </el-checkbox>
        <el-checkbox-group
          v-model="item.checked"
          class="ml-[20px]"
          @change="value => handleCheckedChange(value, item)"
        >
          <el-checkbox
            v-for="items in item.children"
            :key="items.id"
            :label="items.label"
            :value="items.id"
          >
            <div :id="'storeId_' + items.id" v-html="items.label" />
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.store-box {
  position: relative;
}
.store-lists {
  border: 1px solid #efefef;
  padding: 5px 15px;
  border-radius: 5px;
  margin-bottom: 30px;
  min-height: 150px;
  max-height: 500px;
  overflow: auto;
  .store-list {
    margin-bottom: 5px;
  }
}
</style>
